<template>
    <div>
        <panel title="店铺">
            <el-button type="primary" slot="btn" @click="submit" >保存</el-button>
            <el-form >
                <el-form-item label="店铺名称">
                    <el-input :value="form.name" v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="店铺公告">
                    <el-input :value="form.bulletin" v-model="form.bulletin"></el-input>
                </el-form-item>
                
                <el-form-item label="店铺头像">
                    <el-upload
                    :action="BASEURL+ '/shop/upload'"
                    :on-success='avatarsuccess'>
                    <img v-if="form.avatar" :src="BASEURL+ '/upload/shop/'+form.avatar" class="avatar">
                    <span v-else>上传</span>
                    </el-upload>
                </el-form-item>

                <el-form-item label="店铺图片" prop="form.pics">
                    <el-upload
                        class="upload-demo"
                        v-model="form.pics"
                        :on-success='picssuccess'
                        :action="BASEURL+ '/shop/upload'">
                    <i class="el-icon-plus"></i>
                    </el-upload>

                    <div style="display:inline" v-for="(item , i) in form.pics" :key="item">
                        <span class="pic" @click="del(i)">x</span>
                        <img  :src="BASEURL+ '/upload/shop/'+item" class="avatar">
                    </div>
                </el-form-item>

                <el-form-item label="配送费">
                    <template>
                        <el-input-number :value="form.deliveryPrice" v-model="form.deliveryPrice" controls-position="right"  :min="1" :max="10"></el-input-number>
                    </template>
                </el-form-item>
                
                <el-form-item label="配送时间">
                    <template>
                        <el-input-number :value="form.deliveryPrice" v-model="form.deliveryTime" controls-position="right"  :min="1" :max="10"></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="配送描述">
                    <el-input :value="form.deliveryPrice" v-model="form.description"></el-input>
                </el-form-item>

                <el-form-item label="起送价格">
                    <template>
                        <el-input-number :value="form.deliveryPrice" v-model="form.deliveryPrice" controls-position="right"  :min="1" :max="10"></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="店铺评分">
                    <template>
                        <el-input-number :value="form.score" v-model="form.score" controls-position="right"  :min="1" :max="10"></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="销量">
                    <template>
                        <el-input-number :value="form.sellCount" v-model="form.sellCount" controls-position="right"  :min="1" :max="10"></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="活动">
                    <el-checkbox-group v-if="form.supports" v-model="form.supports">
                        <el-checkbox :label="item" :key="item" v-for="item in list"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <!-- <el-form-item label="营业时间">
                    <template>
                        <el-time-picker
                            v-model="from.date"
                            :picker-options="{
                            selectableRange: '18:30:00 - 20:30:00'
                            }"
                            placeholder="任意时间点">
                        </el-time-picker>
                        <el-time-picker
                            arrow-control
                            v-model="from.date"
                            :picker-options="{
                            selectableRange: '18:30:00 - 20:30:00'
                            }"
                            placeholder="任意时间点">
                        </el-time-picker>
                    </template>
                </el-form-item> -->
            </el-form>
        </panel>
        
    </div>
</template>

<script>
import { shopinfoReq, shopeditRwq } from "../../api/shop.api.js";
import { BASEURL } from "../../utils/common.js";
export default {
  data() {
    return {
      BASEURL,
      form: {},
      list: [
        "VC无限橙果汁全场8折",
        "特价饮品8折抢购",
        "在线支付满28减5",
        "情人节特惠"
      ]
    };
  },
  methods: {
    submit() {
      const data = { ...this.form };
    //   data.supports = JSON.stringify(data.supports);
      shopeditRwq(data).then(res => {
        console.log(res);
      });
    },
    avatarsuccess(res) {
      this.form.avatar = res.imgUrl.split("/").pop();
    },
    picssuccess(res) {
      this.form.pics.push(res.imgUrl.split("/").pop());
    },
    del(i) {
      this.form.pics.splice(i, 1);
    }
  },
  created() {
    shopinfoReq().then(res => {
      this.form = res.data.data;
    //   this.name = res.data.data
    });
  }
};
</script>

<style lang="less" scoped>
.pic {
    position: relative;
    left: 128px;
    top: -125px;
}
img {
    width: 140px;
    height: 140px;
}
</style>